<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>创建订单</title>
    <style>
        .container {
            width: 80%;
            margin: 20px auto;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: inline-block;
            width: 100px;
        }
        .product-row {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .btn {
            padding: 5px 10px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-primary {
            background-color: #007bff;
            color: white;
        }
        .btn-danger {
            background-color: #dc3545;
            color: white;
        }
        .error-message {
            color: red;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>创建新订单</h2>
        
        <c:if test="${not empty error}">
            <div class="error-message">${error}</div>
        </c:if>

        <form action="${pageContext.request.contextPath}/bill/add" method="post">
            <div class="form-group">
                <label for="customerName">客户：</label>
                <select name="customerName" id="customerName" required>
                    <option value="">请选择客户</option>
                    <c:forEach items="${customers}" var="customer">
                        <option value="${customer.customerName}">${customer.customerName}</option>
                    </c:forEach>
                </select>
            </div>

            <div class="form-group">
                <label>支付方式：</label>
                <select name="paymentMethod" required>
                    <option value="">请选择支付方式</option>
                    <option value="现金">现金</option>
                    <option value="微信">微信</option>
                    <option value="支付宝">支付宝</option>
                    <option value="银行卡">银行卡</option>
                </select>
            </div>

            <div id="productRows">
                <h3>商品明细</h3>
                <div class="product-row">
                    <div class="form-group">
                        <label>商品：</label>
                        <select name="productNames[]" required>
                            <option value="">请选择商品</option>
                            <c:forEach items="${products}" var="product">
                                <option value="${product.productName}">${product.productName} (库存: ${product.currentStock})</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>数量：</label>
                        <input type="number" name="quantities[]" min="1" required>
                    </div>
                    <button type="button" class="btn btn-danger" onclick="removeProductRow(this)">删除</button>
                </div>
            </div>

            <button type="button" class="btn btn-primary" onclick="addProductRow()">添加商品</button>
            <button type="submit" class="btn btn-primary">提交订单</button>
        </form>
    </div>

    <script>
        function addProductRow() {
            const productRows = document.getElementById('productRows');
            const newRow = productRows.children[1].cloneNode(true);
            
            // 清空新行的选择和输入
            const select = newRow.querySelector('select');
            const input = newRow.querySelector('input');
            select.value = '';
            input.value = '';
            
            productRows.appendChild(newRow);
        }

        function removeProductRow(button) {
            const productRows = document.getElementById('productRows');
            if (productRows.children.length > 2) { // 保留标题和至少一行
                button.parentElement.remove();
            }
        }

        // 防止重复提交
        document.querySelector('form').addEventListener('submit', function(e) {
            const submitter = e.submitter;
            if (submitter) {
                submitter.disabled = true;
                setTimeout(() => {
                    submitter.disabled = false;
                }, 2000);
            }
        });
    </script>
</body>
</html> 